<template>
  <div id="manageQuestionView">
    <a-table
      :data="data"
      style="margin-top: 30px"
      :pagination="{
        pageSize: searchParams.pageSize,
        current: searchParams.current,
        total,
        showTotal: true,
      }"
      @page-change="onPageChange"
    >
      <template #columns>
        <a-table-column title="id" data-index="id"></a-table-column>
        <a-table-column title="题目名" data-index="title"></a-table-column>
        <a-table-column title="标签" data-index="tags">
          <template #cell="{ record }">
            <a-space wrap>
              <a-tag
                v-for="(tagsItem, index) of JSON.parse(record.tags)"
                :key="index"
                color="arcoblue"
                >{{ tagsItem }}
              </a-tag>
            </a-space>
          </template>
        </a-table-column>
        <!--        todo:可以让用户有更好的浏览体验，弹出一个MdViewer组件进行展示-->
        <a-table-column
          title="内容"
          data-index="content"
          ellipsis="ellipsis"
          tooltip="true"
        ></a-table-column>
        <a-table-column
          title="答案"
          data-index="answer"
          ellipsis="ellipsis"
          tooltip="true"
        ></a-table-column>
        <a-table-column title="判题配置">
          <!--        {"timeLimit":1000,"memoryLimit":100,"stackLimit":100}-->

          <a-table-column title="内存限制(kb)" data-index="judgeConfig">
            <template #cell="{ record }">
              {{
                record.judgeConfig
                  ? JSON.parse(record.judgeConfig).memoryLimit
                  : null
              }}
            </template>
          </a-table-column>
          <a-table-column title="时间限制(ms)" data-index="judgeConfig">
            <template #cell="{ record }">
              {{
                record.judgeConfig
                  ? JSON.parse(record.judgeConfig).memoryLimit
                  : null
              }}
            </template>
          </a-table-column>
          <a-table-column title="堆栈限制(kb)" data-index="judgeConfig">
            <template #cell="{ record }">
              {{
                record.judgeConfig
                  ? JSON.parse(record.judgeConfig).stackLimit
                  : null
              }}
            </template>
          </a-table-column>
        </a-table-column>
        <a-table-column
          title="判题用例"
          data-index="judgeCases"
          ellipsis="ellipsis"
          tooltip="tooltip"
        ></a-table-column>
        <a-table-column title="提交数" data-index="submitNum"></a-table-column>
        <a-table-column title="通过数" data-index="acceptNum"></a-table-column>
        <a-table-column title="用户id" data-index="userId"></a-table-column>
        <a-table-column
          title="创建时间"
          data-index="createTime"
          ellipsis="ellipsis"
          tooltip="tooltip"
        >
          <template #cell="{ record }">
            {{ moment(record.createTime).format("YYYY/MM/DD hh:mm:ss") }}
          </template>
        </a-table-column>
        <a-table-column title="操作" fixed="right" width="160">
          <template #cell="{ record }">
            <a-space>
              <a-button type="primary" @click="doUpdate(record)">修改</a-button>
              <a-popconfirm content="确定删除吗？" @ok="doDelete(record)">
                <a-button status="danger">删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watchEffect } from "vue";
import { Question, QuestionControllerService } from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import moment from "moment";

const data = ref([]);
const total = ref(0);
const searchParams = ref({
  pageSize: 8,
  current: 1,
});
const loadData = async () => {
  const res = await QuestionControllerService.listQuestionByPageUsingPost(
    searchParams.value as any
  );
  if (res.code === 0) {
    data.value = res.data.records;
    total.value = res.data.total;
  } else {
    message.error("数据加载失败" + res.message);
  }
};
onMounted(() => {
  loadData();
});

const doDelete = async (question: Question) => {
  const res = await QuestionControllerService.deleteQuestionUsingPost({
    id: question.id,
  });
  if (res.code === 0) {
    message.success("删除成功");
    //更新table
    loadData();
  } else {
    message.error("删除失败" + res.message);
  }
};

const router = useRouter();
const doUpdate = (question: Question) => {
  router.push({
    path: "/update/question",
    // query是url后面的参数，动态路由的参数
    query: {
      id: question.id,
    },
    // params: {
    //   id: question.id,
    // },
  });
};

const onPageChange = (changedPageNum: number) => {
  searchParams.value = {
    ...searchParams.value,
    current: changedPageNum,
  };
};
//监听loadData函数中的变量值是否发生改变，如果发生改变就从新执行该函数
watchEffect(() => {
  loadData();
});
</script>

<style scoped>
#manageQuestionView {
  max-width: 1280px;
  margin: 0 auto;
}
</style>
